<template>
  <el-container>
    <el-main class="el-main">
      <div class="main_box">
        <el-header>报告预览</el-header>
        <div class="btn_rows">
          <el-button @click="createPdf">下载pdf</el-button>
        </div>
        <div class="right_editor" v-html="reportHtml"></div>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import * as echarts from "echarts";
import { mapGetters } from "vuex";
import PdfLoader from "k-htmlpdf";
export default {
  name: "preview",
  props: {},
  components: {},
  data() {
    return {
      html: '<p><span>【&nbsp;&nbsp;&nbsp;&nbsp; <span style="background:#e6f9f5" target-id="123">测试标签</span> &nbsp;&nbsp;&nbsp;&nbsp;】</span><span>【&nbsp;&nbsp;&nbsp;&nbsp; <span style="background:#e6f9f5" target-id="123">测试标签</span> &nbsp;&nbsp;&nbsp;&nbsp;】</span><span>【&nbsp;&nbsp;&nbsp;&nbsp; <span style="background:#e6f9f5" target-id="123">测试标签</span> &nbsp;&nbsp;&nbsp;&nbsp;】</span><span>【&nbsp;&nbsp;&nbsp;&nbsp; <span style="background:#e6f9f5" target-id="123">测试标签</span> &nbsp;&nbsp;&nbsp;&nbsp;】</span></p><div style="display:flex;justify-content:center" data-id="myImg" class="report" id="faaaa2"><div style="width: 300px; height: 240px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);" id="aaa2" _echarts_instance_="ec_1659344513081"><div style="position: relative; width: 300px; height: 240px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;"><canvas data-zr-dom-id="zr_0" width="300" height="240" style="position: absolute; left: 0px; top: 0px; width: 300px; height: 240px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas></div></div></div><div style="display:flex;justify-content:center" data-id="myImg" class="report" id="faaaa1"><div style="width: 300px; height: 240px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);" id="aaa1" _echarts_instance_="ec_1659344513080"><div style="position: relative; width: 300px; height: 240px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;"><canvas data-zr-dom-id="zr_0" width="300" height="240" style="position: absolute; left: 0px; top: 0px; width: 300px; height: 240px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas></div></div></div><p><span>【&nbsp;&nbsp;&nbsp;&nbsp; <span style="background:#e6f9f5" target-id="123">测试标签</span> &nbsp;&nbsp;&nbsp;&nbsp;】</span><span>【&nbsp;&nbsp;&nbsp;&nbsp; <span style="background:#e6f9f5" target-id="123">测试标签</span> &nbsp;&nbsp;&nbsp;&nbsp;】</span><span>【&nbsp;&nbsp;&nbsp;&nbsp; <span style="background:#e6f9f5" target-id="123">测试标签</span> &nbsp;&nbsp;&nbsp;&nbsp;】</span></p><div style="display:flex;justify-content:center" data-id="myImg" class="report" id="faaaa4"><div style="width: 300px; height: 240px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);" id="aaa4" _echarts_instance_="ec_1659344513083"><div style="position: relative; width: 300px; height: 240px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;"><canvas data-zr-dom-id="zr_0" width="300" height="240" style="position: absolute; left: 0px; top: 0px; width: 300px; height: 240px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas></div></div></div><p><br></p><div style="display:flex;justify-content:center" data-id="myImg" class="report" id="faaaa3"><div style="width: 300px; height: 240px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);" id="aaa3" _echarts_instance_="ec_1659344513082"><div style="position: relative; width: 300px; height: 240px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;"><canvas data-zr-dom-id="zr_0" width="300" height="240" style="position: absolute; left: 0px; top: 0px; width: 300px; height: 240px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas></div></div></div><div style="display:flex;justify-content:center" data-id="myImg" class="report" id="faaaa5"><div style="width:300px;height:240px;" id="aaa5">\n       </div></div><p><br></p>',
      option: {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: "line",
          },
        ],
      },
    };
  },
  computed: {
    ...mapGetters(["reportHtml"]),
  },
  created() {},
  mounted() {
    this.$nextTick(() => {
      const tree = document.querySelectorAll(".report");
      tree.forEach((i) => {
        let id = i.getAttribute("id").slice(2);
        this.setChart(id);
      });
    });
  },
  methods: {
    setChart(id) {
      this.$nextTick(() => {
        let dom = document.querySelector("#" + id);
        dom.innerHTML = "";
        dom.setAttribute("_echarts_instance_", null);
        let _myChart = echarts.init(dom);
        _myChart.setOption(this.option, true);
      });
    },
    createPdf() {
      let pdf = new PdfLoader(
        document.querySelector(".right_editor"),
        "测试",
        "itemClass"
      );
      pdf.outPutPdfFn("测试");
    },
  },
  watch: {},
  filters: {},
};
</script>

<style scoped lang='scss'>
.el-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #c8c8c8;
}
.el-header {
  height: 40px;
  line-height: 40px;
}
.el-main {
  flex: 1;
  height: 0;
}
.main_box {
  width: 800px;
  margin: 0 auto;
  background-color: #fff;
  padding: 20px;
}
::v-deep .right_editor {
  .ql-editor {
    height: 400px !important;
  }
}
.btn_rows {
  margin-bottom: 20px;
}
</style>